import { AlertOutlined, PieChartOutlined, RiseOutlined, SendOutlined } from '@ant-design/icons';
import { Card, Col, Row, Button } from 'antd';
import React, { Component } from 'react';
import { connect } from 'umi';
import Colum_Chart from './Comp/Colum_Chart';
import Line_Chart from './Comp/Line_Chart';
import Liquid_Chart from './Comp/Liquid_Chart';
import News_message from './Comp/News_message';
import Pie_Chart from './Comp/Pie_Chart';
import styles from './HomeSideChart.less';
import CarouselImg from './Comp/CarouselImg';

class HomeSideChart extends Component {
  ShowChartTypeComp(chart_type) {
    switch (chart_type) {
      case 'line':
        return <Line_Chart />;
      case 'pie':
        return <Pie_Chart />;
      case 'news':
        return <News_message />;
      case 'colum':
        return <Colum_Chart />;
      case 'lqiuid':
        return <Liquid_Chart />;
      case 'lqiuid':
        return <Liquid_Chart />;
      case 'Carousel':
        return <CarouselImg />;
      default:
        return <></>;
    }
  }

  ShowCardTitleTypeComp(title) {
    switch (title) {
      case '预警信息提示':
        return (
          <div className={styles.container}>
            <AlertOutlined size={20} style={{ marginRight: '2%' }} />
            {title}
            <Button
              type="primary" size='small'
              style={{ float: 'right', marginTop: 8, marginRight: 15 }}
              onClick={() => { this.displayWarningInformation() }}>
              查看详情
            </Button>
          </div>
        );
      case '预警历史信息':
        return (
          <div className={styles.container}>
            {/* <PieChartOutlined size={25} style={{ marginRight: '2%', marginTop: 5 }} /> */}
            {title}
          </div>
        );

      case '水质实况':
        return (
          <div className={styles.container}>
            <RiseOutlined size={20} style={{ marginRight: '2%' }} />
            {title}
          </div>
        );
      default:
        return <div className={styles.container}>{title}</div>;
    }
  }
  //屏幕扩展展示
  Chart_ExtendedSHow(chart_type) {
    const ShowChart = {
      //标签是否展示
      news: false,
      pie: false,
      line: false,
      lines: false,
      lqiuid: true,
      Carousel: false,
    };
    if (ShowChart[`${chart_type}`] == false) return;
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'home/ChangeModelVisibleEffect',
        payload: {
          chart_type,
          ModelVisible: true,
        },
      });
  }

  displayWarningInformation() {
    const { dispatch } = this.props
    dispatch &&
      dispatch({
        type: 'warningManage/changeVisible',
      })
  }

  render() {
    const { card_title, chart_type, visiable } = this.props;
    return (
      <Row className={styles.SideChartDiv} onClick={() => this.Chart_ExtendedSHow(chart_type)}>
        <div className={styles.ChartCard}>
          <div style={{ height: '20%', paddingTop: '1%' }}>
            {this.ShowCardTitleTypeComp(card_title)}
          </div>
          <div style={{ height: '80%', padding: '2%' }}>{this.ShowChartTypeComp(chart_type)}</div>
        </div>
      </Row>
    );
  }
}

export default connect(({ warningManage }) => ({
  visiable: warningManage.visiable,
}))(HomeSideChart);
